<template>
  <div class="articles">

    <!-- 非首页列表头 -->
    <div v-if="!isIndexRoute" class="article-list-header">
      <list-header />
    </div>

    <!-- 列表 -->
    <div class="article-list">
      <transition name="module" mode="out-in">
        <transition-group v-if="articleList.length > 0" key="list" name="fade" tag="div">
          <list-item
            v-for="articleItem in articleList"
            :key="articleItem.id"
            :article="articleItem"
            @click.native="toDetail(articleItem)"
          />
        </transition-group>
        <empty-box v-else key="empty" class="article-empty-box">
          <slot>{{ $i18n.text.article.empty }}</slot>
        </empty-box>
      </transition>
    </div>

    <!-- 加载更多 -->
    <div class="article-load">
      <color-block-box :left="btnColorBlockLeft" border="left" color="red" />
      <button class="btn-loadmore" :disabled="article.fetching || !isCanLoadMore" @click="$emit('loadmore')">
        <span class="icon">
          <i class="iconfont icon-peachblossom" />
        </span>
        <span class="text">
          <span v-if="!article.fetching && isCanLoadMore" v-text="$i18n.text.article.loadmore" />
          <span v-else-if="article.fetching && isCanLoadMore" v-text="$i18n.text.article.loading" />
          <span v-else-if="!isCanLoadMore" v-text="$i18n.text.article.nomore" />
        </span>
      </button>
    </div>
  </div>
</template>

<script>
import ListItem from './item.vue'
import ListHeader from './header.vue'
import { isIndexRoute } from '~/utils/route'

export default {
  name: 'ArticleList',
  components: {
    ListItem,
    ListHeader
  },
  props: {
    article: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      renderAd: true
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.global.isMobile
    },
    isCanLoadMore() {
      const { pages, current } = this.article.data.pagination
      const hasArticles = this.article.data.pagination
      return hasArticles ? (current < pages) : false
    },
    isIndexRoute() {
      return isIndexRoute(this.$route.name)
    },
    btnColorBlockLeft() {
      return this.isMobile ? 60 : 75
    },
    articleList() {
      return this.article.data.data ? this.article.data.data : []
    }
  },
  activated() {
    this.updateAd()
  },
  methods: {
    toDetail(article) {
      if (this.isMobile) {
        this.$router.push(`/article/${article.id}`)
      }
    },
    updateAd() {
      this.renderAd = false
      this.$nextTick(() => {
        this.renderAd = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .articles {

    > .article-list-header {
      margin-bottom: 1em;
      position: relative;
      overflow: hidden;
      background-color: $module-bg-opacity-5;
    }

    > .article-list {
      margin-bottom: 1em;
      min-height: 1em;
      overflow: hidden;

      > .article-empty-box {
        background-color: $module-bg;
      }

      > .article-loading {
        display: flex;
        height: 10em;
        background-color: $module-bg;
      }

      > .article-errmsg {
        height: 10em;
        line-height: 10em;
        text-align: center;
        background-color: $module-bg;
        color: rgba(0, 0, 0, 0.38);
      }
    }

    > .article-load {
      position: relative;
      overflow: hidden;
      z-index: 0;

      > .btn-loadmore {
        width: 100%;
        height: 3em;
        padding: 0 2rem;
        line-height: 3em;
        color: $white;
        background-color: $module-bg;
        display: flex;
        justify-content: space-between;

        &:hover {
          background-color: $module-hover-bg;
        }

        &[disabled] {
          opacity: .9;
          background-color: $module-bg-opacity-5;
        }

        @keyframes loadmore-btn-icon-color {
          0% {
            color: $red
          }
          100% {
            color: $accent
          }
        }

        > .icon {
          > .iconfont {
            animation: loadmore-btn-icon-color 2s infinite;
          }
        }

        > .text {
          text-transform: uppercase;
          font-family: 'webfont-bolder', 'DINRegular';
        }
      }
    }
  }
</style>
